<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>	
<%@ include file="/commons/global.jsp"%>
<!DOCTYPE html>
<html>
  <head>  
    <title>用户列表</title>
	<title>日志</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <%@ include file="/commons/basejs.jsp"%>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<blockquote class="layui-elem-quote layui-quote-nm">
  <label class="layui-form-label">用户名：</label>
  <div class="layui-input-inline">
         <input class="layui-input"  id="loginName" autocomplete="off" />
  </div>
  <div class="layui-btn-group demoTable">
        <button class="select-on layui-btn layui-btn-sm" data-type="select"> <i class="layui-icon">&#xe615;</i> </button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" id="refresh" data-type="reload"> <i class="layui-icon">ဂ</i> </button>
  </div>
</blockquote>
<div class="layui-col-md12">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-normal" data-type="add">
           <i class="layui-icon">&#xe608;</i>新增
        </button>
         <button class="layui-btn layui-btn-danger delclass" data-type="del">
            <i class="layui-icon">&#xe640;</i>删除
        </button> 
    </div>
</div>
<br/>
<div class="layui-col-md12">
<table id="userList" class="layui-hide" lay-filter="user"></table>
</div>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="sexTpl">
  {{#  if(d.sex === 1){ }}
    <span style="color: #F581B1;">女</span>
  {{#  } else { }}
     <span style="color: blue">男</span>
  {{#  } }}
</script>
<script>
  layui.use('table', function () {
    var table = layui.table
      ,form = layui.form;
    //方法级渲染
    table.render({
      id: 'userList',
      elem: '#userList',
      url:  basePath+'/user/dataGrid',
      page: true,
      height: 'full-160',
      cols: [[
        {checkbox: true, fixed: true, width: '5%'},
        {field: 'loginName',  title: '登录名', width: '10%',sort: true, style: 'background-color: #009688; color: #fff;'},     
        {field: 'name', title: '真实姓名', width: '20%'},
        {field: 'age', title: '年龄', width: '17%', sort: true},
        {field: 'phone', title: '电话', width: '13%'},
        {field: 'sex', title: '性别', width: '13%', templet: '#sexTpl'},
        {field: 'right', title: '操作', width: '20%', toolbar: "#barDemo"}
      ]]
    });

    var $ = layui.$, 
    active = {
      select: function () {
        var loginName = $('#loginName').val();
        table.reload('userList', {
          where: {
            loginName: loginName,
          }
        });
      },
      reload:function(){
        $('#loginName').val('');
        table.reload('userList', {
          where: {
            loginName: null,
          }
        });
      },
      add: function () {
        add('添加用户', 'addUserPage', '700', '600');
      },
      edit: function () {
        var checkStatus = table.checkStatus('userList')
            , data = checkStatus.data;
        if (data.length != 1) {
          layer.msg('请选择一行编辑,已选['+data.length+']行', {icon: 5});
          return false;
        }
        update('编辑用户', 'updateUser?id=' + data[0].id, 700, 450);
      },
      detail: function () {
        var checkStatus = table.checkStatus('userList')
            , data = checkStatus.data;
        if (data.length != 1) {
          layer.msg('请选择一行查看,已选['+data.length+']行', {icon: 5});
          return false;
        }
        detail('查看用户信息', 'updateUser?id=' + data[0].id, 700, 450);
      }, 
      del: function () {
        var checkStatus = table.checkStatus('userList')
         , data = checkStatus.data;
        if (data.length == 0) {
            layer.msg('请选择要删除的数据', {icon: 5});
            return false;
        }
        var ids = [];
        for (item in data) {
            ids.push(data[item].id);
        }
        del(ids);
    }
 };
    //监听表格复选框选择
    form.on('checkbox(user)', function (obj) {
      console.log(obj);
   });
    //监听性别操作
    form.on('switch(sexDemo)', function(obj){
    alert(1);
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });
    //监听工具条
    table.on('tool(user)', function (obj) {
      var data = obj.data;
      if (obj.event === 'detail') {
        detail('查看用户', 'detailUser?id=' + data.id, 700, 450);
      } else if (obj.event === 'del') {
          layer.confirm('确定删除用户[<label style="color: #00AA91;">' + data.loginName + '</label>]?', function(index, layero){
            del(data.id);
            layer.close(index); 
          });  
      } else if (obj.event === 'edit') {
          update('编辑用户', 'updateUser?id=' + data.id, 700, 450);
      }
    });
    
  function del(ids) {
    $.ajax({
      url:"del",
      type:"post",
      data:{ids:ids},
      dataType: "json",
      traditional: true,
      success:function(data){
        if (data.success) {
            layer.msg(data.msg, {icon: 6});
            layui.table.reload('userList');
        }else{
           layer.msg(data.msg, {icon : 5});			
         }
      }
    });
  }
  
  //用户详情
  function detail(title, url, w, h) {
     dream_show(title,url,w,h);
   				
  }
  
  // 更新用户弹出
  function update(title, url, w, h) {
     dream_show(title,url,w,h);
  }
  
  //新增用户弹出
  function add(title, url, w, h) {
     dream_full_show(title,url,w,h);
  }
  
   //监听按钮
    $('.layui-btn').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>
  </body>
</html>
